<template>
    <div>
        <div>
            <el-carousel :interval="2000" type="card" height="400px" router>
                <template v-for="item in carObj.cars" :key="item.carid">
                    <el-carousel-item v-if="item.carid <= 8 && item.carid > 0" @click="handleCardClick(item)">
                        <img :src=item.imgpath alt="汽车图片" style="width: 100%;height:400px ;" />
                    </el-carousel-item>
                </template>
                <el-carousel-item :key="8">
                    <img src="@/assets/moreMessage.png" alt="更多信息" style="width: 100%;height:400px ;" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <br />
        <div style="display: flex; justify-content: center; gap: 20px; padding: 20px;">
            <el-card style="max-width: 280px;cursor: pointer;" shadow="hover">
                <template #header>奥迪品牌</template>
                <img src="D:\java116\code\qian\project\vehicle\src\assets\aodi.png" style="width: 100%" />
            </el-card>
            <el-card style="max-width: 280px;cursor: pointer;" shadow="hover">
                <template #header>奔驰品牌</template>
                <img src="D:\java116\code\qian\project\vehicle\src\assets\benchi.png" style="width: 100%" />
            </el-card>
            <el-card style="max-width: 280px;cursor: pointer;" shadow="hover">
                <template #header>宝马品牌</template>
                <img src="D:\java116\code\qian\project\vehicle\src\assets\BMW.png" style="width: 100%" />
            </el-card>
            <el-card style="max-width: 280px;cursor: pointer;" shadow="hover">
                <template #header>大众品牌</template>
                <img src="D:\java116\code\qian\project\vehicle\src\assets\dazhong.png" style="width: 100%" />
            </el-card>
        </div>
    </div>
</template>
<script setup>
import request from '../utils/request';
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { Setting, User, Camera } from '@element-plus/icons-vue';
let router = useRouter();
//定义一个汽车对象存放汽车的详细信息,用于给子组件传参
let card = reactive({})
// 点击卡片整体时触发
const handleCardClick = (car) => {
    //获取汽车被点击的汽车信息
    // 完整复制数据
    Object.assign(card, car);
    // 跳转路由,路由传参
    router.push({
        name: "card",
        params: { carid: car.carid },
    })
};
//定义对象存放轮播图的信息
var carObj = reactive({
    cars: [],
})

onMounted(async () => {
    //查询汽车基本信息
    let r = await request.get("car/findAll")
    if (r.data.success) {
        carObj.cars = r.data.data;
    }
})
</script>
<style scoped></style>